<template>
  <div class="hospital-container">
    <el-container>
      <el-aside width="200px">
        <h5 class="mb-2">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <el-icon><HomeFilled /></el-icon>
            </el-breadcrumb-item>
            <el-breadcrumb-item>医院信息</el-breadcrumb-item>
          </el-breadcrumb>
        </h5>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          router
        >
          <el-menu-item
            index="/hospital/registerPage"
            @click="changeActive('/hospital/registerPage')"
          >
            <el-icon><Menu /></el-icon>
            <span>预约挂号</span>
          </el-menu-item>
          <el-menu-item
            index="/hospital/detailPage"
            @click="changeActive('/hospital/detailPage')"
          >
            <el-icon><Document /></el-icon>
            <span>医院详情</span>
          </el-menu-item>
          <el-menu-item
            index="/hospital/noticePage"
            @click="changeActive('/hospital/noticePage')"
          >
            <el-icon><Message /></el-icon>
            <span>预约须知</span>
          </el-menu-item>
          <el-menu-item
            index="/hospital/closePage"
            @click="changeActive('/hospital/closePage')"
          >
            <el-icon><InfoFilled /></el-icon>
            <span>停诊信息</span>
          </el-menu-item>
          <el-menu-item
            index="/hospital/searchPage"
            @click="changeActive('/hospital/searchPage')"
          >
            <el-icon><Search /></el-icon>
            <span>查询/取消</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { reqHospitalDetail, reqHospitalDepartment } from "@/api/HospitalPage";
export default {
  name: "HospitalPage",
  data() {
    return {
      hoscode: this.$route.query.hoscode,
    };
  },
  methods: {
    async getHospital() {
      let result = await reqHospitalDetail(this.hoscode);
      if (result.code === 200) {
        this.$store.commit("hospitalDetail/GET_HOSPITAL", result.data);
      }
    },
    async getDepartment() {
      let result = await reqHospitalDepartment(this.hoscode);
      if (result.code === 200) {
        this.$store.commit("hospitalDetail/GET_DEPARTMENT", result.data);
      }
    },
    changeActive(path) {
      this.$router.push({ path, query: { hoscode: this.hoscode } });
    },
  },
  mounted() {
    this.getHospital();
    this.getDepartment();
  },
};
</script>

<style lang="scss" scoped>
.el-aside {
  .mb-2 {
    height: 30px;
    display: flex;
    padding-left: 25px;
    align-items: center;
    color: #7f7f7f;
  }
}
</style>
